.tag {
    background-color: whitesmoke;
    border-radius: 3px;
    font-size: .75rem;
    color: gray(74);
    height: 2em;
    display: inline-flex;
    padding-left: .75em;
    padding-right: .75em;
    position: relative;

    &.is-primary {
        color: white;
        background-color: var(--primary);
    }

    align-items: center;
    justify-content: center;

    line-height: 1.5;
    white-space: nowrap;

    &.is-small {
        font-size: calc(.75rem / (4 / 3));
    }

    &.is-normal {}

    &.is-medium {
        font-size: calc(.75rem * (4 / 3));
    }

    &.is-large {
        font-size: calc(.75rem * (4 / 3) * (4 / 3));
    }

    &.is-rounded {
        border-radius: 1em;
    }

    &.is-delete {
        width: 2em;
        padding: 0;

        &::after, &::before {
            content: '';
            position: absolute;
            width: 50%;
            height: 1px;
            top: 50%;
            left: 50%;
            background-color: currentColor;
        }

        &::after {
            transform: translateX(-50%) rotate(-45deg);
        }
        &::before {
            transform: translateX(-50%) rotate(45deg);
        }

    }
}

.tags {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    &:last-child {
        margin-bottom: -.5rem;
    }

    & .tag {
        margin-bottom: .5rem;

        &:not(:last-child) {
            margin-right: .5rem;
        }
    }

    &.has-addons {

        & .tag {
            margin-right: 0;
            vertical-align: top;

            &:first-child {
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
            }
            &:last-child {
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
            }
        }

    }

}
